<template>
  <div class="">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-copy"></i> 消息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-tabs v-model="message" type="border-card">
        <el-tab-pane label="未读消息" name="unread" lazy> <unread /> </el-tab-pane>
        <el-tab-pane label="所有消息" name="allmsg" lazy> <allmsg /> </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Allmsg from './components/Allmsg.vue'
import Unread from './components/Unread.vue'
export default {
  components: { Unread, Allmsg },
  name: 'message',
  data() {
    return {
      message: 'unread',
    }
  },
  methods: {
    handleRead(index) {
      const item = this.unread.splice(index, 1)
      console.log(item)
      this.read = item.concat(this.read)
    },
    handleDel(index) {
      const item = this.read.splice(index, 1)
      this.recycle = item.concat(this.recycle)
    },
    handleRestore(index) {
      const item = this.recycle.splice(index, 1)
      this.read = item.concat(this.read)
    },
  },
  computed: {
    unreadNum() {
      return this.unread.length
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .main {
    font-size: 12px;
  }
  .el-image {
    height: 60px;
    img {
      height: 100%;
      width: auto;
    }
  }
}
</style>
